<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				position: relative;
				width: 600px;
				height: 300px;
				margin: 30px auto;
				overflow: hidden;
			}

			.left {
				display: none;
				position: absolute;
				top: 50%;
				left: -20px;
				transform: translateY(-50%);
				width: 50px;
				height: 50px;
				border-top-right-radius: 50%;
				border-bottom-right-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 999;
			}

			.right {
				display: none;
				position: absolute;
				top: 50%;
				right: -20px;
				transform: translateY(-50%);
				width: 50px;
				height: 50px;
				border-top-left-radius: 50%;
				border-bottom-left-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 999;
			}


			ul li,
			ol li {
				list-style: none;
			}

			.picture {
				position: absolute;
			}
			.picture li {
				position: absolute;
				width: 600px;
				height: 300px;
			}

			img {
				width: 100%;
				height: 100%;
			}

			.list {
				position: absolute;
				bottom: 10px;
				left: 10px;
			}

			.list li {
				float: left;
				margin-right: 10px;
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			.list .current {
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<span class="left"><i>&lt;</i></span>
			<span class="right"><i>&gt;</i></span>
			<ul class="picture">
				<li><img src="./1.jpg"></li>
				<li><img src="./2.jpg"></li>
				<li><img src="./3.jpg"></li>
				<li><img src="./4.jpg"></li>
				<li><img src="./5.jpg"></li>
			</ul>
			<ol class="list">
			</ol>
		</div>
		<script type="text/javascript">
			var picture = document.querySelector('.picture');
			var list = document.querySelector('.list');
			var num = 0;
			var circle = 0;
			for (i = 0; i < picture.children.length; i++) {
				// 设置图片的位置
				picture.children[i].style.left = i * 600 + 'px';
				// 自动生成有序列表
				var li = document.createElement('li');
				li.setAttribute('index', i);
				list.appendChild(li);
				// 给li添加点击事件
				li.addEventListener('mousemove', function() {
					for (var i = 0; i < list.children.length; i++) {
						list.children[i].className = '';
					}
					this.className = 'current';
					var index = this.getAttribute('index');
					num = index;
					circle = index;
					animate(picture, -index * 600);
				})
			}
			// 设置第一个ol孩子的类名
			list.children[0].className = 'current';
			var left = document.querySelector('.left');
			var right = document.querySelector('.right');
			var container = document.querySelector('.container');
			// 设置鼠标经过离开事件
			container.addEventListener('mouseover', function() {
				left.style.display = 'block';
				right.style.display = 'block';
				clearInterval(timer)
				timer = null;
			})
			container.addEventListener('mouseout', function() {
				left.style.display = 'none';
				right.style.display = 'none';
				timer = setInterval(function() {
					right.click();
				}, 1000);
			})

			// js动画函数
			function animate(obj, target, callback) {
				clearInterval(obj.timer)
				obj.timer = setInterval(function() {
					var step = (target - obj.offsetLeft) / 10;
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					if (obj.offsetLeft == target) {
						clearInterval(obj.timer);
						if (callback) {
							callback();
						}
					}
					obj.style.left = obj.offsetLeft + step + 'px';
				}, 15)
			}

			var first = picture.children[0].cloneNode(true);
			picture.appendChild(first);
			picture.lastChild.style.left = (picture.children.length - 1) * 600 + 'px';
			//右侧点击事件
			right.addEventListener('click', function() {
				if (num == picture.children.length - 1) {
					picture.style.left = 0;
					num = 0;
				}
				num++;
				animate(picture, -num * 600);
				circle++;
				if (circle == list.children.length) {
					circle = 0;
				}

				for (var i = 0; i < list.children.length; i++) {
					list.children[i].className = '';
				}
				list.children[circle].className = 'current';
			})
			// 左侧点击事件
			left.addEventListener('click', function() {
				if (num == 0) {
					picture.style.left = -(picture.children.length - 1) * 600 + 'px';
					num = picture.children.length - 1;
				}
				num--;
				animate(picture, -num * 600);
				circle--;
				if (circle < 0) {
					circle = list.children.length - 1;
				}

				for (var i = 0; i < list.children.length; i++) {
					list.children[i].className = '';
				}
				list.children[circle].className = 'current';
			})

			var timer = setInterval(function() {
				// 手动调用
				right.click();
			}, 1000);
		</script>
	</body>
</html>
